<template>
  <div class="search-bar">
    <el-form :inline="true" :model="formItem" class="form-filter" size="mini">
      <el-form-item>
        <el-date-picker
          v-model="formItem.s_afEqReportDate"
          type="date"
          value-format="timestamp"
          placeholder="从"
          style="width: 130px"
          @change="onChangeAfEqReportDate"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="formItem.s_beEqReportDate"
          type="date"
          value-format="timestamp"
          placeholder="至"
          style="width: 130px"
          @change="onChangeBeEqReportDate"
        />
      </el-form-item>
      <el-form-item>
        <el-select v-model="formItem.s_unitCode" clearable filterable placeholder="厅局" class="fixed-width" @change="search">
          <el-option v-for="(item) in availableInstitutions" :key="item.code" :label="item.name" :value="item.code" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formItem.s_incidentUserCode" clearable filterable placeholder="处理人" class="fixed-width" @change="search">
          <el-option v-for="(item) in availableUsers" :key="item.username" :label="item.name" :value="item.username" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button plain icon="el-icon-search" @click="search" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { list as dList } from '@neu/dcom-ui/api/dictionary'
import { byUser as myInstitutions } from '@neu/dcom-ui/api/institutions'

// 定义一个查询表单原始项
const formItem = {
  s_unitCode: '',
  s_dailyReportDate: '',
  s_incidentUserCode: '',
  s_beEqReportDate: null,
  s_afEqReportDate: null,
  s_serviceTypeCode: '',
  s_serviceAttributesCode: ''

}

export default {
  name: 'WorkDailyTableFilter',
  data() {
    return {
      formItem: {
        ...formItem
      },
      dailyReportDate: null,
      worktypes: [],
      // 二级服务属性
      workpropertys: [],
      availableUsers: [],
      availableInstitutions: []
    }
  },
  created() {
    dList({ s_type: 'worktype' }).then(res => {
      this.worktypes = res.data
    })

    myInstitutions().then(response => {
      const data = response.data
      const users = []; const institutions = []
      data.forEach(it => {
        institutions.push({ code: it.code, name: it.name })
        it.residents.forEach(r => {
          users.push(r)
        })
      })
      this.availableUsers = users
      this.availableInstitutions = institutions
    })
  },
  methods: {
    // 查询按钮点击事件处理
    search: function() {
      this.$parent.filter(this.formItem)
      this.$emit('input', this.formItem)
    },
    // 重置按钮点击事件处理
    reset: function() {
      this.formItem = {
        ...formItem
      }
      this.search()
    },
    onChangeAfEqReportDate: function(val) {
      this.search()
    },
    onChangeBeEqReportDate: function(val) {
      if (val) {
        this.formItem.s_beEqReportDate = val + 24 * 60 * 60 * 1000 - 1000
      }
      this.search()
    },
    // 根据类型获取服务属性
    typeChange(val) {
      this.workpropertys = []
      this.formItem.s_serviceAttributesCode = ''
      if (val) {
        this.getFormList(val)
      }
      this.search()
    },
    // 获取服务属性二级菜单
    getFormList(type) {
      dList({ s_type: type }).then(res => {
        this.workpropertys = res.data
      })
    },
    userChange(val) {
      this.search()
    },
    unitChange(val) {
      this.search()
    }
  }
}
</script>

<style scoped>
  .fixed-width {
    width: 120px;
  }
</style>
